<template>
  <div class="register">
    <nav-bar class="register-nav">
      <div slot="left">
        <div class="login-hander-item" @click="bgoBack">
          <van-icon name="arrow-left" size="26px"/>
        </div>
      </div>
      <div slot="right">
        <div class="login-hander-item" @click="goBack">
          <van-icon name="wap-home-o" size="26px"/>
        </div>
      </div>
    </nav-bar>
    <div class="content">
       <div class="register-title">
        <h1>易购优选</h1>
      </div>
      <form class="input-group">
        <div class="input-row">
          <label>账号</label>
          <input v-model="regForm.username" type="text" class="input-clear input" placeholder="请输入账号">
        </div>
        <div class="input-row">
          <label>密码</label>
          <input v-model="regForm.password" type="password" class="input-clear input" placeholder="请输入密码">
        </div>
        <div class="input-row">
          <label>确认</label>
          <input type="password" ref="pwdConfirm" class="input-clear input" placeholder="请确认密码">
        </div>
        <div class="input-row">
          <label>邮箱</label>
          <input v-model="regForm.email" type="email" class="input-clear input" placeholder="请输入邮箱">
        </div>
      </form>
      <div class="content-padded">
        <button @click="register" class="btn">注册</button>
      </div>
      <div class="content-padded">
        <p>注册成功后的用户可用于登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/navbar/NavBar.vue'
export default {
  name: 'Register',
  components: {
    NavBar
  },
  data () {
    return {
      regForm: {
        username: '',
        password: '',
        email: ''
      }
    }
  },
  methods: {
    register: function () {
    },
    bgoBack () {
      this.$router.go(-1)
    },
    goBack () {
      this.$router.push({ name: 'home' })
    }
  }
}
</script>
<style lang="scss">
.register{
  height: 100vh;
  width: 100vw;
  background: #dd524d;
  color: #fff;
  .register-nav{
    padding-top: 10px;
  }
  .content{
    width: 80%;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%);
    text-align: center;
    .register-title{
      padding-bottom: 20px;
      text-align: center;
    }
    .input-row{
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 18px;
      & label{
        width: 50px;
      }
      input{
        background: #dd524d;
        border: none;
        border-bottom: 2px solid #fff;
        margin: 18px 10px;
      }
      input::-webkit-input-placeholder{
            color:#fff;
      }
      input::-moz-placeholder{   /* Mozilla Firefox 19+ */
          color:#fff;
      }
      input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
          color:#fff;
      }
      input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
          color:#fff;
      }
    }
    .content-padded{
      button{
        color: #dd524d;
        width: 80%;
        height: 50px;
        margin: 10px 0 0;
      }
    }
  }
}
</style>
